<ModalDialog
  {id}
  {label}
  {title}
  background="var(--main-bg)"
  on:show="onShow()"
>
  <ComposeBox {realm} autoFocus={true} dialogId={id} />
</ModalDialog>
<script>
  import ModalDialog from './ModalDialog.html'
  import ComposeBox from '../../compose/ComposeBox.html'
  import { on, emit } from '../../../_utils/eventBus.js'
  import { show } from '../helpers/showDialog.js'
  import { oncreate as onCreateDialog } from '../helpers/onCreateDialog.js'
  import { close } from '../helpers/closeDialog.js'

  export default {
    oncreate () {
      on('postedStatus', this, this.onPostedStatus)
      onCreateDialog.call(this)
    },
    data: () => ({
      title: undefined,
      realm: 'dialog'
    }),
    methods: {
      show,
      close,
      onPostedStatus (realm) {
        if (realm !== this.get().realm) {
          return
        }
        this.close()
      },
      onShow () {
        emit('resizeComposeInput', this.get().realm)
      }
    },
    components: {
      ModalDialog,
      ComposeBox
    }
  }
</script>
